<template>
  <view class="layout">
    <wd-navbar
      title="学生绑定"
      :left-arrow="showBack"
      placeholder
      :style="{ marginTop: `${navHeight}px` }"
      @click-left="handleClickLeft"
    />
    <view class="content">
      <view class="title"> 学生信息 </view>
      <wd-form ref="form" :model="studentInfo">
        <wd-cell-group border>
          <wd-input
            v-model="studentInfo.name"
            label="姓名"
            label-width="80px"
            prop="name"
            clearable
            custom-label-class="custom-label-class"
            placeholder="请填写学生姓名"
            :rules="[{ required: true, message: '姓名不能为空' }]"
          />
          <wd-input
            v-model="studentInfo.idNum"
            label="身份证号"
            label-width="80px"
            type="number"
            prop="idNum"
            custom-label-class="custom-label-class"
            clearable
            placeholder="请填写学生身份证号"
            :rules="[{ required: true, message: '身份证号不能为空' }]"
          />
          <wd-calendar
            v-model="studentInfo.birthday"
            prop="birthday"
            custom-class="custom-calendar"
            label-width="80px"
            label="出生日期"
            clearable
            :rules="[{ required: true, message: '请选择出生日期' }]"
          />
        </wd-cell-group>

        <view class="flex-between">
          <wd-input
            v-model="studentInfo.height"
            label="身高"
            label-width="80px"
            prop="height"
            clearable
            custom-label-class="custom-label-class"
            placeholder="请输入身高(选填)"
          />
          <view class="gray-text"> cm </view>
        </view>
        <view class="flex-between">
          <wd-input
            v-model="studentInfo.weight"
            label="体重"
            label-width="80px"
            prop="weight"
            clearable
            custom-label-class="custom-label-class"
            placeholder="请输入体重(选填)"
          />
          <view class="gray-text"> kg </view>
        </view>
      </wd-form>
    </view>
    <view class="flex-center">
      <wd-button
        type="primary"
        size="large"
        block
        :align-right="false"
        class="confirm"
        @click="handleSubmit"
      >
        确认绑定
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useToast } from "wot-design-uni";
import StudentApi from "@/api/student";
import { useConfigStore } from "@/store/config";
import { useStudentStore } from "@/store/student";

const navHeight = ref(0);
const configStore = useConfigStore();
navHeight.value = configStore.systemBarHeight;
const studentStore = useStudentStore();

const { success: showSuccess, error: showError } = useToast();
definePage({
  style: {
    navigationBarTitleText: "学生绑定信息",
    navigationStyle: "custom",
  },
});

const showBack = ref(false);
const companyId = ref("");
onLoad((options) => {
  console.log("options", options);
  if (options?.showBack) {
    showBack.value = true;
  }
  if (options?.companyId) {
    companyId.value = options.companyId;
  }
});

const studentInfo = reactive<{
  name: string;
  idNum: string;
  birthday: string;
  height: string;
  weight: string;
}>({
  name: "",
  idNum: "",
  birthday: "",
  height: "",
  weight: "",
});

const form = ref();

/**
 * 处理表单提交逻辑
 * @param {object} formData - 表单数据对象
 * @returns {Promise<void>} - 无返回值
 * @description 提交表单数据并进行校验，校验通过后显示成功提示
 */
function handleSubmit() {
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const res = await StudentApi.addOpenPerson({
          personnel: {
            companyId: companyId.value,
            name: studentInfo.name,
            idNum: studentInfo.idNum,
            birthday: studentInfo.birthday,
            height: studentInfo.height,
            weight: studentInfo.weight,
          },
        });
        if (res.personnelId) {
          studentStore.setPersonnelIds(res.personnelId);
          studentStore.setCurpersonnelId(res.personnelId);
          showSuccess({
            msg: "绑定成功",
          });
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          showError({
            msg: "绑定失败，请重新绑定",
          });
        }
      }
    })
    .catch((error) => {
      console.log(error, "error");
    });
}

function bindStudent() {
  uni.navigateTo({
    url: "/pages/index/index",
  });
}

function handleClickLeft() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.content {
  margin-top: 5%;
  padding: 20px 24px;
}
.title {
  font-size: 14px;
}

:deep(.custom-picker) {
  padding: 0px;
  .wd-picker__confrim {
    display: #007aff;
  }
  .wd-picker__cancel {
    display: #999;
  }
  .wd-cell__value {
    font-size: 18px;
    color: #999999;
  }
  .wd-cell {
    padding-left: 0px;
  }
}

.flex-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 70%;
  .confirm {
    width: 80%;
    border-radius: 10px;
  }
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.custom-label-class) {
  &.wd-input__label {
    display: block;
    text-align: right;
  }
  .wd-input__label-inner {
    font-size: 14px;
    color: #333333;
  }
}
:deep(.custom-calendar) {
  .wd-cell__left {
    flex: none;
    justify-content: flex-end;
  }
}
.gray-text {
  font-size: 14px;
  color: #999;
}
</style>
